<template>
  <view style="padding: 0 10px">
    <view style="padding: 10px">所有总类汇总：{{ finallyData }}</view>
    <!-- <view class="fr ac">
      <button @click="addCategory">新增种类</button>
      <button @click="addQuantity">新增数量</button>
      <button @click="deleteCategory">删除种类</button>
    </view> -->

    <view class="fr ac" style="padding-bottom: 5px">
      <button size="mini" @click="edit">
        {{ `${!isEdit ? '编辑' : '保存'}种类` }}
      </button>
      <button type="primary" size="mini" @click="addQuantity">新增数量</button>
      <button type="warn" size="mini" @click="reset">一键清空</button>
    </view>
    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th width="70" v-for="(category, index) in categories" :key="index">
          <input
            :disabled="!isEdit"
            v-model="categories[index]"
            placeholder="请输入种类名称"
            @input="$event => updateCategoryName(index, $event)"
          />
        </uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
        <uni-td v-for="(quantity, colIndex) in row" :key="colIndex">
          <input
            type="number"
            v-model="tableData[rowIndex][colIndex]"
            placeholder="请输入"
            placeholder-class="input-placeholder"
            @input="$event => calculateSubtotal(rowIndex, colIndex, $event)"
          />
        </uni-td>
      </uni-tr>
      <uni-tr>
        <uni-td
          class="fc jc ac"
          style="background-color: red !important"
          v-for="(subtotal, index) in subtotals"
          :key="index"
          ><div>总汇:</div>
          <div>
            {{ subtotal }}
          </div></uni-td
        >
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { eidtHelper } from '@/common/helper';

let length = 49;
const finallyData = ref(0);
const categories = ref();
const tableData = ref([
  Array.from({ length }, () => ''),
  Array.from({ length }, () => '')
]);
const isEdit = ref(false);

const subtotals = ref(Array.from({ length }, () => ''));

onLoad(() => {
  if (eidtHelper.get().length <= 0)
    eidtHelper.set(
      Array.from({ length }, () => '').map((item, index) => `种类${index + 1}`)
    );
  categories.value = eidtHelper.get();
});

const edit = () => {
  isEdit.value = !isEdit.value;
  eidtHelper.set(categories.value);
};

const reset = () => {
  uni.showModal({
    title: '是否一键清空',
    success: ({ confirm }) => {
      if (confirm) {
        tableData.value = [
          Array.from({ length }, () => ''),
          Array.from({ length }, () => '')
        ];
        subtotals.value = Array.from({ length }, () => '');
        finallyData.value = '';
      }
    }
  });
};

const addCategory = () => {
  const newCategory = `种类${categories.value.length + 1}`;
  categories.value.push(newCategory);
  tableData.value.forEach(row => row.push(0));
  subtotals.value.push(0);
};

const addQuantity = () => {
  console.log(
    Array.from({ length: 49 }, () => '').map(
      (item, index) => `种类${index + 1}`
    )
  );

  tableData.value.push(Array.from({ length }, () => ''));
  // categories.value.forEach((category, index) => {
  //   categories.value[index] = `种类${index + 1}`;
  // });
  // tableData.forEach(row => row.push(0));
  // subtotals.value.push(0);
};

const deleteCategory = () => {
  if (categories.value.length > 1) {
    categories.value.pop();
    tableData.value.forEach(row => row.pop());
    subtotals.value.pop();
  }
};

const calculateSubtotal = (rowIndex, colIndex, e) => {
  console.log(rowIndex, colIndex, e, 'eeeee');
  console.log(subtotals.value, 'eeeee');
  subtotals.value = tableData.value.reduce((acc, row) => {
    return row.map(
      (quantity, index) => Number(acc[index]) + Number(quantity) || 0
    );
  }, Array(categories.value.length).fill(0));
  finallyData.value = subtotals.value.reduce((pre, nex) => pre + nex, 0);
};

const updateCategoryName = (index, e) => {
  const newName = categories.value[index];
  categories.value = categories.value.map((category, i) =>
    i === index ? newName : category
  );
};
</script>

<style lang="scss">
// :deep(.uni-table-th) {
//   padding: 0;
// }
</style>
